<template>
  <div class="home-container">
    <!--    账号管理内容-->
    <div class="top-container">
      <el-button type="primary" @click="handleAdd">添加账号</el-button>
    </div>
    <!--    table组件-->
    <el-table v-loading="accountLoading" :data="accountData" border style="width: 100%">
      <el-table-column label="账号" prop="username" />
      <el-table-column label="密码">
        <template #default="scope">
          ******
        </template>
      </el-table-column>
      <!-- <el-table-column label="备注" prop="remark" /> -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button :icon="Edit" link type="primary" @click="handleUpdate(row)"
            >修改密码</el-button
          >
          <!-- <el-button  v-if="row.username!='admin'" :icon="Delete" link type="primary" @click="handleDelete(row)"
            >删除账号</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <!--    添加账号对话框-->
    <el-dialog v-model="addDialogVisible" align-center title="添加账号" width="500">
      <el-form
        ref="formRef"
        :model="accountForm"
        :rules="rulesAdd"
        label-width="auto"
        style="max-width: 500px"
      >
        <el-form-item label="账号" type="number" prop="username">
          <el-input v-model="accountForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="accountForm.password" />
        </el-form-item>
        <el-form-item class="button-content">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onAddSubmit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    编辑对话框-->
    <el-dialog v-model="editDialogVisible" align-center title="编辑账号" width="500">
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="rulesEdit"
        label-width="auto"
        style="max-width: 500px"
      >
        <el-form-item label="账号" type="number" prop="username">
          <el-input v-model="editForm.username" disabled />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" />
        </el-form-item>
        <el-form-item>
          <div class="button-content">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="onEditSubmit">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Edit ,Delete} from "@element-plus/icons-vue";
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from "element-plus";
import {
  addAccountList,
  getAccountList3,
  updateAccountList,
  valAccountList,
} from "@/api/account";

const accountData = ref(<Array<unknown> | any>[]);
const initialData = ref(<Array<unknown> | any>[]);
const accountForm = reactive(<object | any>{
  username: "",
  password: "",
  type:"3"
});
const editForm = reactive(<object | any>{
  username: "",
  password: "",
});
const deleteDialogVisible = ref(<Boolean>false);
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const accountLoading = ref(<Boolean>true);
// 表单引用
const formRef = ref<InstanceType<typeof ElForm>>();
const editFormRef = ref<InstanceType<typeof ElForm>>();

// 表单验证规则
const rulesEdit = reactive({
  username: [
    { required: true, message: "账号不能为空", trigger: "blur" },
    // { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度应为6到20个字符", trigger: "blur" },
  ],
});

const rulesAdd= reactive({
  username: [
    { required: true, message: "账号不能为空", trigger: "blur" },
    // { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式不正确", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度应为6到20个字符", trigger: "blur" },
  ],
  // remark: [{ max: 100, message: "备注长度不能超过100个字符", trigger: "blur" }],
});

//初始化数据时，密码加密showPassword字段添加到数组中
onMounted(async () => {
  await getData();
});
const getData = async () => {
  // 后端返回的数据
  const res = await getAccountList3();
  accountLoading.value = false;

  // initialData.value = res.data?.info_list;
  initialData.value = res.data;
  accountData.value = initialData.value.map((item: any) => ({ ...item, showPassword: false }));
};


//添加账号
const handleAdd = () => {
  accountForm.username = "";
  accountForm.password = "";
  addDialogVisible.value = true;
};
//修改密码
const handleUpdate = async (row: { username: any }) => {
  editForm.username = "";
  editForm.username = row.username;
  editForm.password = "";
  editDialogVisible.value = true;
};
//修改密码对话框确定按钮
const onEditSubmit = async () => {
  editFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      // 这里可以添加修改密码的逻辑
      // const res = await valAccountList(editForm.username);
      // const isExist = res.data.is_exist;
      // if (isExist == "true") {
      //   await updateAccountList(editForm);
      //   ElMessage.success("密码修改成功");
      //   editDialogVisible.value = false;
      //   getData();
      // } else {
      //   ElMessage.warning("账号不存在");
      // }
      try {
        await updateAccountList(editForm);
        ElMessage.success("密码修改成功");
        editDialogVisible.value = false;
        getData();
      } catch (error) {
        ElMessage.error("密码修改失败")
      }
    } else {
      ElMessage.error("表单验证失败，请检查输入");
    }
  });
};
//添加对话框确定按钮
const onAddSubmit = async () => {
  // await addAccountList(accountForm);
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      try {
        await addAccountList(accountForm);
        // 这里可以添加的逻辑
        ElMessage.success("添加成功");
        addDialogVisible.value = false;
        getData();
      } catch (error) {
        ElMessage.error("添加失败");
      }
    } else {
      ElMessage.error("表单验证失败，请检查输入");
    }
  });
};


//删除账号
const handleDelete= async (row :any)=>{
console.log(row);  
}


</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .top-container {
    margin: 20px 0;
  }

  .password-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .password-cell span {
      flex-grow: 1;
      text-align: left;
    }

    .password-cell .el-button {
      margin-left: 10px;
    }
  }
}

.button-content {
  margin-left: 300px;
}
</style>
